<script>
export default {
  name: "trainorder",
  data() {
    return {
      checked: true,
      labelPosition: 'right',
      user: {
        userId: 1,
        username: '',
        userTel: '',
        userCarid: ''
      },
      trainlist:{
        trainId: "",
        trainSname: "",
        trainEname: "",
        trainStime: " ",
        trainEtime: " ",
        trainNumber: "",
        trainSeat: "",
        trainPrice: "",
        trainType: ""
      },
      formdiv:'',
      tbTripOrder:{
        tripTicketId:'',
        userId:'',
        userRname:'',
        userPhone:'',
        userCarid:'',
        tripTicketTime:'',
        tripTicketStatus:'',
        tripTicketFlag:'',
        tripTicketTotal:''
      }
    };
  },
  methods: {

    onSubmit(){
      this.tbTripOrder.userId=this.user.userId;
      this.tbTripOrder.userRname=this.user.username;
      this.tbTripOrder.userPhone=this.user.userTel;
      this.tbTripOrder.userCarid=this.user.userCarid;
      this.tbTripOrder.tripTicketTotal=this.trainlist.airPrice;


      this.$axios.post('/tripOrder/trainOrder',this.tbTripOrder).then(res=>{
        console.log(res.data.code)
        if(res.data.code == 200){
          this.$router.push({path:'/tripOrder1'})
        }
      })
    },
    findById(trainId){
      this.$axios.get('/fonttrain/onesone',{
        params:{
          trainId:trainId,
        }
      }).then(res=>{
        console.log(res)
        this.trainlist=res.data.data;
      })
    },
  },
  mounted() {
    var trainId=this.$route.query.trainId;
    console.log(trainId)
    if (trainId!=null){
      this.findById(trainId);
    }
  }
}
</script>

<template>
  <div class="map-container">
    <el-row class="top">
      <el-col :span="16" style=""><img src="http://simg1.qunarzz.com/piao/images/tts/ocenter/tips_logo.png
">去哪儿网客户服务中心：95117（如在境外拨打，请加拨0086)</el-col>
      <el-col :span="8"><span>适老化及无障碍&nbsp;&nbsp;&nbsp;| &nbsp;&nbsp;去哪儿通行证 &nbsp;&nbsp;</span>
        <span>登录 &nbsp;&nbsp;&nbsp;| &nbsp;&nbsp;&nbsp;注册</span></el-col>
    </el-row>

    <div class="mp-section">
      <el-tag class="top1">1，填写信息</el-tag>
      <el-tag class="top1">2，在线支付</el-tag>
      <el-tag class="top1">3，安全飞行，确保无忧</el-tag>
    </div>
    <el-form >
      <div class="top2">
        <div>
          <el-row :ref="trainlist" :model="trainlist">
            <el-col :span="20" style="font-weight: bold;font-size: 30px">欢迎订购火车票</el-col>

          </el-row>
        </div>
        <div>
          <el-row>
            <el-col :span="8">车次：{{trainlist.trainNumber}}</el-col>
<!--            <el-col :span="8" >飞机编号：{{air.airNumber}}</el-col>-->
<!--            <el-col :span="8">舱位：{{air.airSpace}}</el-col>-->
          </el-row>
        </div>
        <div>
          <el-row>
            <el-col :span="8">起始地址:{{trainlist.trainSname}}</el-col>
            <el-col :span="8">到达地址:{{trainlist.trainEname}}</el-col>
            <el-col :span="8" style="color: red">价格:￥{{trainlist.trainPrice}}</el-col>
          </el-row>
        </div>
        <div>
          <el-row>
            <el-col :span="8">起始时间:{{trainlist.trainStime}}</el-col>
            <el-col :span="8">到达时间:{{trainlist.trainEtime}}</el-col>

          </el-row>
        </div>
        <div>
          <el-form :label-position="labelPosition" label-width="80px" :model="user">
            <el-form-item label="姓名">
              <el-input  style="width: 400px" v-model="user.username"></el-input>
            </el-form-item>
            <el-form-item label="手机号码">
              <el-input  style="width: 400px" v-model="user.userTel"></el-input>
            </el-form-item>
            <el-form-item label="身份证号">
              <el-input style="width: 400px" v-model="user.userCarid"></el-input>
            </el-form-item>
          </el-form>
          <el-checkbox v-model="checked">保存常用联系人</el-checkbox>
        </div>

        <div> <el-checkbox v-model="checked">我已阅读并接受合同条款、补充条款及其他所有内容
        </el-checkbox>
        </div>

        <div>
          <el-form :label-position="labelPosition" label-width="80px" >
            <el-form-item>
              <el-button type="danger" round @click="onSubmit()">提交订单</el-button>
            </el-form-item>
          </el-form>
        </div>

      </div>
    </el-form>

    <el-form :model="trainlist">
      <div class="top2right">
        <div style="font-weight: bold;color: red;margin-left: 120px">购票须知</div>
        <div style="font-weight: bold;">退款限制</div>
        <div> 起飞时间截止前可以申请改签</div>
        <div style="font-weight: bold;">车票信息</div>
        <div>车次名称：{{ trainlist.trainNumber }}</div>
        <div>起始时间：{{ trainlist.trainStime }}</div>


        <div>订单总额：￥{{trainlist.trainPrice}}（1/张）</div>
      </div>
    </el-form>


  </div>
</template>

<style scoped>
.map-container{
  background-image: url('../assets/2.jpg');
  background-size: cover;
  background-position: center center;
//opacity: 0.9;
  width: 100%;
  height: 700px;
}
.el-row {
  margin-bottom: 0px;
  &:last-child {
    margin-bottom: 0;
  }
}
.top{
  font-size: 14px;
  background-color: #f4f4f4;
  min-height: 36px;
  border-radius: 4px;
}
.top1 {
  width: 250px;
//text-indent: 70px;
  background: #00bcd4;
//border-radius: 5px 0 0 5px;
  color: #fff;
  font-size: 16px;

}
.mp-section{
  width: 1190px;
//margin: 0 auto;
  margin-top: 20px;
  margin-left: 480px;
  font-size: 20px;
  font-family: "Hiragino Sans GB","微软雅黑",Tahoma,Arial,sans-serif;
}
.top2{
  margin-top: 20px;
  margin-left: 200px;
  width: 800px;
  height: 500px;
  border: 3px solid white;
//background-color: silver;
}
.top2right{
  width: 300px;
  height: 400px;
  border: 3px solid white;
//background-color: gold;
  margin-left: 1050px;
  margin-top: -500px;
}
</style>
